<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function checkUsername(){
            var username=/^[a-zA-Z0-9-]{5,10}$/;
            var usernameInput = document.getElementById("username");
            var usernmaeValue = usernameInput.value;
            var usernameErroe = document.getElementById("usernameError");
            if(!username.test(usernmaeValue)){
                usernameErroe.innerText = "用户名格式不正确";
                return false;
            }
            /*
            * 1 响应乱码问题
            * 2 响应信息格式不规范
            *      JSON 格式 前后端共同遵守
            *        {"code":"","message":"","data":""}
            * 3 校验不通过，无法组织表单提交   未来使用axios解决
            * */

            //格式正确，通过之后，继续校验用户名是否被占用
            var request = new XMLHttpRequest();
            request.onreadystatechange = function(){
                // 判断响应状态码
                if(this.readyState==4&&this.status==200){
                    // 获取响应结果 转为对象
                    var result = JSON.parse(this.responseText);
                    if(result.code!=200){
                        usernameErroe.innerText = "不可用";

                    }
                }
            }
            // 发送请求
            request.open("Get","/user/checkUsername?username="+usernmaeValue)
            request.send()

            usernameErroe.innerText = "ok";
            return true;   不需要了
        }
        function checkPassword(){ 
            var password=/^[a-zA-Z0-9-]{6}$/;
            var passwordInput = document.getElementById("password");
            var passwordValue = passwordInput.value;
            var passwordError = document.getElementById("passwordError");
            if(!password.test(passwordValue)){
                passwordError.innerText = "密码格式不正确";
                return false;
            }
            passwordError.innerText = "ok";
            return true;
        }
        function checkConfirmPassword(){
            var passwordInput = document.getElementById("confirmpassword");
            var passwordValue = passwordInput.value;
            var confirmpasswordError = document.getElementById("confirmpasswordError")
            if(passwordValue!=document,getElementById("password".value)){
                confirmpasswordError,innerText = "密码不一致";
                return false;
            }
            confirmpasswordError.innerText = "ok";
            return true;
        }

        function checkFORM(){ 
            return checkUsername()&&checkPassword()&&checkConfirmPassword();
        }
    </script>
</head>
<body>
     <form action="/user/regist" method="post" onsubmit="return checkFORM()">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" onblur="checkUsername()"><br>
        <span id="usernameError"></span><br>
        
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" onblur="checkPassword()"><br>
        <span id="passwordError"></span><br></br>

        <label for="confirmPassword">确认密码：</label>
        <input type="password" id="confirmPassword" name="confirmPassword" onblur="checkConfirmPassword()"><br>
        <span id="confirmPasswordError"></span><br></br>

        <input type="submit" value="注册" >
    </form>
</body>
</html>